<%--
  Created by IntelliJ IDEA.
  User: maicss
  Date: 2022/5/3
  Time: 上午10:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="style/pages.css" type="text/css">
    <link rel="stylesheet" href="style/account.css" type="text/css">
    <title>账号管理</title>
</head>
<body>
<%--修改头像--%>
<%--修改密码模块--%>
    <div class="box">
        <h3>头像设置</h3>
        <img src="../resources/head_icon/0.png" id="bigHead">
        <div id="headChooser">
<%--这部分内容在js中生成--%>
        </div>
        <script>
            let bigHead = document.getElementById("bigHead")
            let headChooser = document.getElementById("headChooser")
            let littleHeads;
            // 将所有可选头像添加到界面上，并为其绑定点击事件
            for (let i=0; i<=20; i++){
                let h = document.createElement("img")
                h.src="../resources/head_icon/"+i.toString()+".png"
                h.classList.add("littleHead")
                headChooser.append(h)
                h.headCode = i;
                h.addEventListener("click",function () {
                    this.classList.add("littleHeadChoosing")
                    const Http = new XMLHttpRequest();
                    const url='../userServlet?type=changeUserHead&head='+this.headCode.toString();
                    Http.open("GET", url);
                    Http.send();
                    Http.onreadystatechange = (e) => {
                        if (Http.responseText===""){
                            return
                        }
                        if (Http.status !== 505){
                            setAccountHead(Http.responseText)
                        }else {
                            alert("登录已超时，请重新登录")
                            top.location.replace("../login.jsp")
                        }
                    }
                })
            }
            // 将添加后的所有选项赋值到littleHeads数组，便于访问
            littleHeads = document.getElementsByClassName("littleHead")

            // 设置切换头像的界面显示
            function setAccountHead(code) {
                bigHead.src = "../resources/head_icon/"+code.toString()+".png"
                top.setUserHead(code.toString())
                for(let head of littleHeads){
                    head.classList.remove("littleHeadNow")
                    head.classList.remove("littleHeadChoosing")
                }
                littleHeads[code].classList.add("littleHeadNow")
            }
            // 初始化当前头像，编码从顶层窗口获取
            setAccountHead(top.LoginUserHead)

        </script>
    </div>
    <div class="box">
        <h3>修改密码</h3>
        <form method="post" action="../userServlet?type=changePassword">
            <table>
                <tr>
                    <td class="label">旧密码：</td>
                    <td><input type="password" name="oldPassword"></td>
                </tr>
                <tr>
                    <td class="label">新密码：</td>
                    <td><input type="password" name="newPassword"></td>
                </tr>
            </table>
            <input type="submit" value="提交">
        </form>
    </div>
<%--修改用户名模块--%>
<div class="box">
    <h3>修改用户名</h3>
    <form method="post" action="../userServlet?type=changeUserName">
        <table>
            <td class="label">新用户名：</td>
            <td><input type="text" name="newName"></td>
        </table>
        <input type="submit" value="提交">
    </form>
</div>
<%--注销用户模块--%>
<div class="box">
    <h3>注销用户</h3>
    <form method="post" action="../userServlet?type=cancelUser">
        <table>
            <tr>
                <td class="label">用户密码：</td>
                <td><input type="password" name="password"></td>
            </tr>
        </table>
        <input type="submit" value="注销">
    </form>
</div>
</body>
</html>
